<template>
  <main class="mission_planing_container">
    <h2>知识添加</h2>

    <main class="table_container">
      <div class="container-input flex" style="justify-content: space-between;">
        <!--        <div>-->
        <!--          <span>节点类型：</span>-->
        <!--          <el-select v-model="queryParams.type" placeholder="请选择" clearable>-->
        <!--            <el-option-->
        <!--              v-for="(item, index) in TypeList"-->
        <!--              :key="index"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value"-->
        <!--            >-->
        <!--            </el-option>-->
        <!--          </el-select>-->
        <!--          <el-button-->
        <!--            size="small"-->
        <!--            type="primary"-->
        <!--            @click="onSubmit"-->
        <!--            style="margin-left: 10px;"-->
        <!--            >查询</el-button-->
        <!--          >-->
        <!--          <el-button size="small" type="primary" @click="onReset"-->
        <!--            >重置</el-button-->
        <!--          >-->
        <!--        </div>-->
        <div class="aside">
          <el-form
            :inline="true"
            :model="queryParams"
            class="demo-form-inline"
            size="small"
          >
            <el-form-item label="">
              <el-select
                v-model="queryParams.type"
                placeholder="请选择节点"
                clearable
              >
                <el-option
                  v-for="(item, index) in TypeList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-input
                v-model="queryParams.condition"
                v-max-length-tip="30"
                v-no-space
                clearable
                placeholder="输入节点或关系的关键词"
              ></el-input>
            </el-form-item>

            <el-form-item label="节点数量">
              <el-input
                v-model="queryParams.showNum"
                placeholder="请输入节点数"
                clearable
              >
              </el-input>
            </el-form-item>
            <el-form-item label="跳数">
              <el-select
                v-model="queryParams.skip"
                placeholder="请选择跳数"
                clearable
              >
                <el-option
                  v-for="(item, index) in JumpCountList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button type="primary" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button type="primary" size="small" @click="handleOpenNodeModal"
            >添加节点</el-button
          >

          <el-button type="primary" size="small" @click="dialogVisible_2 = true"
            >添加节点关系</el-button
          >

          <el-button @click="importJsonData" size="small" type="primary"
            >批量导入</el-button
          >
        </div>
      </div>

      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :lg="4">
          <!-- <el-tree
            class="el-tree-left"
            accordion
            :data="TreeSelectList"
            :props="{
              value: 'id',
              label: 'nodeType',
              children: 'childrenList'
            }"
            @node-click="handleNodeClick"
            highlight-current
          >
          </el-tree> -->

          <ul class="left-know-list-wrap" v-if="TreeSelectList.length">
            <li
              v-for="(item, index) in TreeSelectList"
              :key="index"
              @click="handleNodeClick(item)"
              :class="{ active: item.nodeType == activeColor }"
            >
              {{ item.nodeType }}
            </li>
          </ul>
          <el-empty
            image="null"
            description="暂无数据"
            class="left-know-list-wrap"
            v-else
          ></el-empty>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="20">
          <G6Editor
            mode="edit"
            :height="800"
            :width="400"
            :data="allNodeData"
            :iseditable="true"
            ref="g6Editor"
          ></G6Editor>
          <div>
            <ul
              class="flex"
              style="color: #fff;justify-content: space-between;"
            >
              <li>
                <span>节点总数：</span>
                <span>{{ nodeCount }}</span>
              </li>
              <li>
                <span>节点关系总数：</span>
                <span>{{ edgeCount }}</span>
              </li>
              <li>
                <span>当前节点数：</span>
                <span>{{ currentNodeCount }}</span>
              </li>
              <li>
                <span>当前节点关系数：</span>
                <span>{{ currentEdgeCount }}</span>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>

      <el-dialog
        append-to-body
        :visible.sync="dialogVisible"
        title="添加节点"
        @close="handleCloseNodeModal"
      >
        <div
          style="display: flex;flex-wrap: wrap;justify-content: space-between;"
        >
          <div class="form-item">
            <span class="form-item-label">选择类型：</span>

            <div style="width: 100%;text-align: left">
              <el-radio-group v-model="radioType" @input="handleRadioChange">
                <el-radio
                  v-for="item in addTypeRadioList"
                  :key="item.value"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </div>
          </div>

          <div class="form-item" v-if="radioType">
            <span class="form-item-label">节点类型：</span>
            <el-select
              v-if="radioType == '2'"
              v-model="nodeType"
              placeholder="请选择"
              style="width: 100%;"
              clearable
              @change="handleNodeSelect"
            >
              <el-option
                v-for="(item, index) in TreeSelectList"
                :key="index"
                :label="item.nodeType"
                :value="item.nodeType"
              >
              </el-option>
            </el-select>

            <el-input
              v-else
              maxlength="100"
              placeholder="请输入"
              v-model="nodeType"
            />
          </div>
        </div>

        <div style="margin:20px 0" v-show="radioType == '1'">
          <el-button type="primary" size="small" @click="handleAdd"
            >添加</el-button
          >
        </div>

        <el-table :data="moreNodeList" stripe height="43vh" v-show="showTable">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="label" label="名称">
            <template #default="{ row }">
              <el-input
                v-if="row.label !== '节点名称'"
                v-model="row.label"
                v-no-space
                clearable
              ></el-input>

              <span v-else>节点名称</span>
            </template>
          </el-table-column>
          <el-table-column prop="value" label="值">
            <template #default="{ row }">
              <el-input v-model="row.value" v-no-space clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="action" v-if="radioType == '1'">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.label !== '节点名称'"
                type="primary"
                size="small"
                @click="handleDelete(scope.$index, scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleSaveNode">确定</el-button>
          <el-button @click="handleCloseNodeModal">取消</el-button>
        </span>
      </el-dialog>

      <el-dialog
        append-to-body
        :visible.sync="dialogVisible_2"
        width="60%"
        title="添加节点关系"
        @close="handleCloseEdgeModal"
      >
        <div class="flex" style="margin-bottom: 46vh;">
          <div class="flex">
            <span class="form-item-label">开始节点：</span>
            <!-- <v-selectpage
              :page-size="2"
              :data="nodeoptions"
              v-model="formInline.sourceId"
              title="请选择开始节点"
              style="width: 100%;"
              @values="handelSingleValues"
              @change="handlePageChange"
              ref="selectpage"
            /> -->
            <el-input
              @focus="hadnleSelectForce('sourceId')"
              v-model="sourceName"
              placeholder="请输入"
              clearable
              filterable
              popper-class="select-warp"
            >
              <!-- <el-option
                v-for="(item, index) in startNodeList"
                :key="index"
                :label="item.name"
                :value="item.nodeId"
              >
              </el-option> -->
            </el-input>
          </div>
          <div class="inputbox" style="margin: 0 10px;width: 10%;">
            <el-divider></el-divider>
          </div>

          <div class="flex">
            <span class="form-item-label">中间名称：</span
            ><el-input
              class="form-item-input"
              v-model="formInline.relationShipName"
              placeholder="请输入"
              maxLength="100"
              v-max-length-tip="100"
              v-no-space
              clearable
            ></el-input>
          </div>

          <div class="inputbox" style="margin: 0 10px;width: 10%;">
            <el-divider></el-divider>
          </div>

          <div class="flex">
            <span class="form-item-label">结束节点：</span>
            <el-input
              @focus="hadnleSelectForce('targetId')"
              v-model="targetName"
              placeholder="请输入"
              clearable
              filterable
              popper-class="select-warp"
            >
              <!-- <el-option
                v-for="(item, index) in endNodeList"
                :key="index"
                :label="item.name"
                :value="item.nodeId"
              >
              </el-option> -->
            </el-input>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleSaveEdge">确定</el-button>
          <el-button @click="handleCloseEdgeModal">取消</el-button>
        </span>
      </el-dialog>
    </main>

    <uploadDialog :popUpObj="popUpObj" @getUploadJson="getUploadJson" />

    <select-model ref="selectRef" @selectCallback="selectCallback" />
  </main>
</template>

<script src="./index.js"></script>
<style lang="scss" src="./index.scss" scoped></style>
<style lang="scss">
.select-warp {
  display: none;

  ::v-deep .el-select-dropdown__list {
    display: none;
  }
}
</style>
